<template>
    <div id="header">
        <div class="outside">
<!--            导航部分-->
            <div class="h_top banxin">
                <div class="item">
                    <router-link :to="{name:'home'}">返回首页</router-link>
                </div>
                <div class="item">&nbsp;
                    <router-link :to="{name:'selectLoginMode'}">登录</router-link>
                </div>
            </div>
            <div class="h_bottom banxin">
                <!--                        @select="handleSelect"-->
                <el-menu
                        @open="handleOpen"
                        @close="handleClose"
                        :default-active="path"
                        class="el-menu-demo"
                        mode="horizontal"
                        background-color="rgba(2, 125, 180, 1)"
                        text-color="#afdfe4"
                        active-text-color="#C1E3FF"
                        router>
<!--                    <el-menu-item index="1">关于平台</el-menu-item>-->
<!--                    <el-menu-item index="2">平台动态</el-menu-item>-->
<!--                    <el-submenu index="3">-->
<!--                        <template slot="title">平台推广活动</template>-->
<!--                        <el-menu-item index="3-1" class="twoMenuStyle">活动日历</el-menu-item>-->
<!--                        <el-menu-item index="3-2" class="twoMenuStyle">推广活动</el-menu-item>-->
<!--                        <el-menu-item index="3-3" class="twoMenuStyle">企业调研</el-menu-item>-->
<!--                        <el-menu-item index="3-4" class="twoMenuStyle">技术研讨会</el-menu-item>-->
<!--                        <el-menu-item index="3-5" class="twoMenuStyle">优秀方案推介会</el-menu-item>-->
<!--                        <el-menu-item index="3-6" class="twoMenuStyle">主题展会</el-menu-item>-->
<!--                        <el-menu-item index="3-7" class="twoMenuStyle">征集活动</el-menu-item>-->
<!--                    </el-submenu>-->
<!--&lt;!&ndash;                    <el-menu-item index="4"><a href="#" target="_blank">数字化转型优秀方案</a></el-menu-item>&ndash;&gt;-->
<!--                    <el-submenu index="4">-->
<!--                        <template slot="title">数字化转型优秀方案</template>-->
<!--                        <el-menu-item index="4-1" class="twoMenuStyle">服装行业优秀方案</el-menu-item>-->
<!--                        <el-menu-item index="4-2" class="twoMenuStyle">家电优秀方案</el-menu-item>-->
<!--                        <el-menu-item index="4-3" class="twoMenuStyle">高端设备优秀方案</el-menu-item>-->
<!--                        <el-menu-item index="4-4" class="twoMenuStyle">农机优秀方案</el-menu-item>-->
<!--                        <el-menu-item index="4-5" class="twoMenuStyle">化学制药优秀方案</el-menu-item>-->
<!--                        <el-menu-item index="4-6" class="twoMenuStyle">其他制药优秀方案</el-menu-item>-->
<!--                    </el-submenu>-->
<!--                    <el-submenu index="5">-->
<!--                        <template slot="title">公共服务</template>-->
<!--                        <el-menu-item index="5-1" class="twoMenuStyle">数字化转型咨询</el-menu-item>-->
<!--                        <el-menu-item index="5-2" class="twoMenuStyle">企业数字化转型自诊断</el-menu-item>-->
<!--                        <el-menu-item index="5-3" class="twoMenuStyle">企业需求和服务商对接</el-menu-item>-->
<!--                        <el-menu-item index="5-4" class="twoMenuStyle">技术服务交易</el-menu-item>-->
<!--                    </el-submenu>-->
<!--                    <el-menu-item index="6">平台产品</el-menu-item>-->
<!--                    <el-menu-item index="7">用户工作台</el-menu-item>-->
<!--                    <el-submenu index="8">-->
<!--                        <template slot="title" >加入我们</template>-->
<!--                        <el-menu-item index="8-1" class="twoMenuStyle">注册</el-menu-item>-->
<!--                        <el-menu-item index="8-2" class="twoMenuStyle">用户信息管理</el-menu-item>-->
<!--                        <el-menu-item index="8-3" class="twoMenuStyle" >密码修改</el-menu-item>-->
<!--                    </el-submenu>-->
<!--                    动态加载-->
                    <template v-for="(item, index) in nav_menu_data">
                        <!-- 二级 -->
                        <el-submenu v-if="item.children" :index="item.path" :key="index">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{item.title}}</span>
                            </template>
                            <el-menu-item-group v-for="(item2, index2) in item.children" :key="index2">
                                <el-menu-item :index="item2.path" :key="index2" class="twoMenuStyle">{{item2.title}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item v-else :index="item.path" :key="index">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.title}}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </div>
        </div>
<!--        logo部分-->
        <div class="logo banxin">
            <img class="logo_img" src="~@/assets/image/header/u146.png" alt="">
            <div banxin>
                <input class="input_img" type="text">
                <button>搜索</button>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                activeIndex: '1',
                activeIndex2: '1',
                path: "",
                nav_menu_data: [
                    {
                        title: "关于平台",
                        path: "/aboutPlatform",
                        icon: "el-icon-s-platform"
                    },
                    {
                        title: "平台动态",
                        path: "/platformDynamic",
                        icon: "el-icon-s-data"
                    },
                    {
                        title: "平台推广活动",
                        path: "/order",
                        icon: "el-icon-present",
                        children: [
                            {
                                title: "活动日历",
                                path: "/2"
                            },
                            {
                                title: "推广活动",
                                path: "salesManagement"
                            },
                            {
                                title: "技术研讨会",
                                path: "/3"
                            },
                            {
                                title: "优秀方案推介会",
                                path: "/4"
                            },
                            {
                                title: "主题展会",
                                path: "/5"
                            },
                            {
                                title: "征集活动",
                                path: "/6"
                            }
                        ]
                    },
                    {
                        title: "优秀方案",
                        path: "/data",
                        icon: "el-icon-menu",
                        children: [
                            {
                                title: "服装行业优秀方案",
                                path: "/garment"
                            },
                            {
                                title: "家电优秀方案",
                                path: "/homeAppliance"
                            },
                            {
                                title: "高端装备优秀方案",
                                path: "/highEndIndustry"
                            },
                            {
                                title: "农机优秀方案",
                                path: "/agriculturalMachinery"
                            },
                            {
                                title: "化学制药优秀方案",
                                path: "/chemicalPharmacy"
                            },
                            {
                                title: "其他优秀方案",
                                path: "/otherIndustries"
                            }
                        ]
                    },
                    {
                        title: "公共服务",
                        path: "push",
                        icon: "el-icon-suitcase",
                        children: [
                            {
                                title: "数字化转型咨询",
                                path: "/7"
                            },
                            {
                                title: "企业数字化转型自诊断",
                                path: "/8"
                            },
                            {
                                title: "企业需求和服务商对接",
                                path: "/9"
                            },
                            {
                                title: "技术服务交易",
                                path: "/10"
                            },
                        ]
                    },
                    {
                        title: "平台产品",
                        path: "/solutionDetails",
                        icon: "el-icon-magic-stick"
                    },
                    {
                        title: "用户工作台",
                        path: "/selectLoginMode",
                        icon: "el-icon-user-solid"
                    },
                    {
                        title: "加入我们",
                        path: "/13",
                        icon: "el-icon-circle-plus-outline",
                        children: [
                            {
                                title: "注册",
                                path: "/logup"
                            },
                            {
                                title: "用户信息管理",
                                path: "salesManagement"
                            },
                            {
                                title: "密码修改",
                                path: "/EvaluationManagement"
                            },
                        ]
                    },
                ]
            }
        },
        created() {
            this.onRouteChanged();
        },
        mounted() {

        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 路由变化
            onRouteChanged() {
                let that = this;
                that.path = that.$route.path;
            },

        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            $route: "onRouteChanged"
        }
    }
</script>

<style scoped>
    .outside{
        height: 127px;
        /*background: url("~@/assets/image/header/u1.png");*/
        /*background-size: 100% 127px;*/
        background-color: rgba(2, 125, 180, 1);
        color: white;
        font-size: 17px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .h_top{
        display: flex;
        justify-content: flex-end;
    }
    .h_bottom{
        display: flex;
        justify-content: flex-end;
        font-family: 'Arial Black', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 18px;
        color: #C1E3FF;
    }
    .item{
        margin: 0 40px;
    }
    .logo{
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo img{
        width: 532px;
        height:98px;
    }
    .logo input{
        width:378px;
        height:47px;
        font-size: 20px;
        color:#01AAED;
    }
    .input_img{
        background: url("~@/assets/image/header/u6.svg") no-repeat;
        border: none;
        width: 378px;
        height:47px;
    }
    button{
        width: 97px;
        height: 47px;
        background-color: rgba(79, 156, 219, 1);
        border-width: 1px;
        border-style: solid;
        border-color: rgba(23, 109, 170, 1);
        border-radius: 5px;
        font-size: 15px;
        color: #FFFFFF;
        margin-left: 20px;
    }
    a {
        text-decoraction: none;
        color: white;
    }
    .router-link-active {
        color: white;
    }
    /*修改默认样式*/
    /*去掉导航栏下边框的线*/
    .el-menu.el-menu--horizontal {
         border-bottom: none;
    }
    /* 导航栏字体大小*/
    .el-menu-item {
        color: rgb(193, 227, 255);
        font-family: 'Arial Black', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 18px;
        padding-left: 30PX;
        text-align: center;
    }
    /* elementUI修改navMenu带有二级菜单的title样式*/
    ::v-deep .el-submenu__title {
        color: rgb(175, 223, 228);
        font-family: 'Arial Black', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 18px;
        padding-left: 10%;
        text-align: center;
    }

    /*鼠标移入事件*/
    .el-menu-item:hover{
        background: rgba(2, 125, 180, 1) !important;
        color:#ffffff!important;
    }
    ::v-deep .el-submenu__title:hover {
        background: rgba(2, 125, 180, 1) !important;
        color:#ffffff!important;
    }

    /*去选中的下划线*/
    .el-menu--horizontal>.el-menu-item.is-active {
         border-bottom: none;
        /*border-bottom: 1px solid #409EFF;*/
        /*border-bottom-width: 10px;*/
    }
    /*设置border-bottom的长度*/
    .el-menu--horizontal>.el-menu-item.is-active:after {
        content: '';
        position: absolute;
        bottom: -4px;
        top: auto;
        left: 40px;
        height: 2px;
        width: 65%;
        background-color: #C1E3FF;
        text-align: center;
    }
    /*设置图标颜色*/
    ::v-deep .el-submenu__title i {
        color: inherit;
    }
    .el-menu-item i{
        color: inherit;
    }
    /*二级菜单样式*/
    .twoMenuStyle{
        font-size: 13px;color: white;border-top:1px white solid ;text-align: center;font-weight:normal;
    }

</style>
